import FlowDesign from "./_Part/FlowDesign";
import DesignNode from "./_Part/Vertical/DesignNode";
import StartNode from "./_Part/Vertical/StartNode";
import AddNodeMenu from "./_Part/AddNodeMenu";
import ConditionNode from "./_Part/Vertical/ConditionNode";

import CStartNode from "./_Part/Column/CStartNode";
import CDesignNode from "./_Part/Column/CDesignNode";
import { flowDesignNodes, vertical } from "@/hooks/useWflow";
import CConditionNode from "./_Part/Column/CConditionNode";
import SmallView from "./_Part/SmallView";

export default defineComponent({
  name: "Wflow",
  setup() {
    return () => (
      <div class=" h-full relative">
        <SmallView />
        <FlowDesign>
          {vertical.value
            ? flowDesignNodes.map((item) => {
                if (item.type == "ROOT") {
                  return <StartNode />;
                } else if (
                  item.type == "CONDITIONS" ||
                  item.type == "CONCURRENTS"
                ) {
                  return <ConditionNode nodeItem={item} />;
                } else {
                  return <DesignNode key={item.id} nodeItem={item} />;
                }
              })
            : flowDesignNodes.map((item) => {
                if (item.type == "ROOT") {
                  return <CStartNode />;
                } else if (
                  item.type == "CONDITIONS" ||
                  item.type == "CONCURRENTS"
                ) {
                  return  <CConditionNode nodeItem={item} />;
                } else {
                  return <CDesignNode key={item.id} nodeItem={item} />;
                }
              })}
        </FlowDesign>
        <AddNodeMenu />
      </div>
    );
  },
});
